<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1,#box2,#box3,#box4{
				width:200px; height:100px; border:1px solid #ccc; position:absolute;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="box1"style="background:#1ea7fd;Left:30px;top:30px; " onclick="mask({ id:'box1', duration:2})">A</div>
			<div id="box2"style="background:yellow;left:30px;top:160px;"  onclick="mask({ id:'box2', duration:2})">B</div>
			<div id="box3"style="background:yellowgreen;Left:30px;top:290px;"   onclick="mask({ id:'box3', duration:2})">C</div>
			<div id="box4"style="background:papayawhip;left:30px;top:420px;"   onclick="mask({ id:'box4', duration:2})">D</div>
		</div>
		<script>
			function mask(options) {
				const { id, duration } = options;
				const div = document.getElementById(id);
				if (!div) return;
				//return () => {
					const originzindex = div.style.zIndex;
					div.style.boxShadow = '0 0 0 2000px rgba(0,0,0,0.62)';
					div.style.zIndex = '1000';
					const position = div.style.position;
					div.style.position = position == 'static' ? ' relative' : position;
					// setTimeout(() => {
					//	div.style.boxShadow = '';
					//	div.style.zIndex = originzindex;
					//	div.style.position = position;
					// }, duration * 1000)
				//}
			
			}
			
			// const m = mask({ id:'box2', duration:2}); 
			// setTimeout(()=>{
			// 	m();
			// },2000);
		</script>
	</body>
</html>